<template>
    <view>
        <!--顶部导航栏-->
        <view class="tab-bar">
            <view v-for="(tabBar,index) in contentList" :key="index" class="for_item">
                <view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
                    <view class="swiper-tab-title">{{tabBar.title}}</view>
                    <view class="swiper-tab-line"></view>
                </view>
            </view>
        </view>
        <!--内容区-->
        <view class="uni-tab-bar">
            <swiper :current="tabIndex" @change="tabChange" style="height:600px">
                <swiper-item v-for="(content,index) in contentList" :key="index" class="scroll">
                    <view class="part1" v-if="tabIndex === 0">
                        <!-- 图文详情 -->
                        <view class="pic_box" ref="pic_box">
                            <view class="pic_content">
                                <view class="left_line"></view>
                                <view class="text">图文详情</view>
                                <view class="right_line"></view>
                            </view>
                            <rich-text class="img_box" :nodes="goodsVersion"></rich-text>
                        </view>
                    </view>
                    <view class="part2" v-if="tabIndex === 1">
                        <rich-text class="img_box" :nodes="service_desc"></rich-text>
                    </view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            goodsVersion: {
                type: String,
                default: false
            },
            service_desc: {
                type: String,
                default: false
            }
        },
        data() {
            return {
                height: '',
                tabIndex: 0,	//选中标签栏的序列
                contentList: [
                    {
                        title:'商品详情'
                    },
                    {
                        title:'服务说明'
                    }
                ],
                tabBars:[
                    {
                        name: '关注',
                        id: 'guanzhu'
                    },
                    {
                        name: '推荐',
                        id: 'tuijian'
                    },
                    {
                        name: '热点',
                        id: 'redian'
                    },
                    {
                        name: '体育',
                        id: 'tiyu'
                    },
                    {
                        name: '财经',
                        id: 'caijing'
                    },
                    {
                        name: '娱乐',
                        id: 'yule'
                    }
                ],
                swiperHeight: 0
            }
        },
        components:{

        },

        onLoad() {

        },
        methods: {
            toggleTab(index){
                console.log(index)
                this.tabIndex = index
            },
            //滑动切换swiper
            tabChange(e){
                console.log(e.detail)
                const tabIndex = e.detail.current
                this.tabIndex = tabIndex

            }
        }
    }
</script>

<style scoped lang="scss">
    //@import '../../node_modules/animate.css';
    .tab-bar{
        display: flex;
        flex-direction: row;
        margin-left: 15rpx;
        margin-bottom: -40rpx;
        background-color: white;
    }
    .swiper-tab-title{
        margin-bottom: 25rpx;
    }
    .swiper-tab-list{
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin-right: 25rpx;
    }
    .active .swiper-tab-title {
        color: #333333;
    }
    .active .swiper-tab-line{
        width: 42rpx;
        height: 10rpx;
        background: #F41015;
        border-radius: 5rpx;
        margin: 0 auto;
    }
    .uni-swiper-tab{
        border-bottom: 1rpx solid #eeeeee;
    }
    .arrow_box{
        width: 30rpx;
        height: 30rpx;
        margin-top: 10rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .swiper-item{
        padding: 39rpx 30rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1rpx solid #EDEDED;
        .text_one{
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
        }
    }
    .for_item{
        text-align: center;
        width: 50%;
        height: 100rpx;
        line-height: 15rpx;
    }
    .pic_box{
        .pic_content{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            background-color: white;
            padding: 25rpx 0 ;
            .left_line{
                width:80px;
                height:1px;
                background:rgba(229,229,229,1);
                margin-top:4rpx;
                margin-right: 27rpx;
            }
            text{
                font-size:24rpx;
                font-family:PingFang SC;
                font-weight:500;
                color:rgba(51,51,51,1);
                display: block;
                margin-top: 60rpx;
            }
            .right_line{
                width:80px;
                height:1px;
                background:rgba(229,229,229,1);
                margin-top: 4rpx;
                margin-left: 27rpx;
            }
        }
    }
    .scroll{
        overflow: scroll;
    }
    .img_box{
        padding-bottom: 105rpx;
    }
    .part2{
        padding: 50rpx 15rpx;
        width: 750rpx;
		image{
		    max-width: 100% !important;
		}
    }
</style>
